var app = new Vue({
   el: '#app',
   data: {
      message: "hello",
      status: 1,
      currentImg: '',
      objects: [],
      cars: [],
      allFrames: [],
      videoLenght: 0,
      canPlay: false,
      videoPath: undefined,
      currentFrame: 0,
      count: [0, 0, 0, 0],
      down: false,
      frame: undefined,
      preImg: './web/pre.png',
      playImg: './web/play.png',
      nextImg: './web/next.png',
      stopImg: './web/stop.png'
   },
   methods: {
      refreshChart(count) {
         console.log(this.chart)
         option = this.option
         option.series[0].data = count;
         this.chart.setOption(option)
      },
      changeFrame(currentImg, objects, count) {
         this.currentImg = currentImg
         this.objects = objects
         this.count = count
         refreshChart(count)
      },
      listenDrag() {
         // 监听拖动
         if (this.down) {
            let frame = Math.min(Math.floor(percent * this.videoLenght / 100) + 1, this.videoLenght)
            console.log(frame)
            this.play(frame, false)
         }
      },
      listenDown() {
         this.down = true
      },
      listenUp() {
         this.down = false
      },
      play(frame, canPlay) {
         let that = this
         this.frame = frame
         that.canPlay = canPlay
         allFrames = this.allFrames
         that.currentImg = './predict-img/' + that.videoPath + '/output/' + frame + '.jpg'
         that.changeFrame(that.currentImg, allFrames[frame - 1].boxes, allFrames[frame - 1].count)
         let percent = frame / that.videoLenght
         setDrag(percent)
         frame++
         this.frame++
         if (canPlay) {
            timer = setInterval(function () {
               if (frame >= that.videoLenght || !that.canPlay || frame <= 0) {
                  clearInterval(timer)
                  return
               }
               that.currentFrame = frame
               let percent = frame / that.videoLenght
               setDrag(percent)
               currentImg = './predict-img/' + that.videoPath + '/output/' + frame + '.jpg'
               that.changeFrame(currentImg, allFrames[frame - 1].boxes, allFrames[frame - 1].count)
               frame++
               that.frame++
            }, 1000 / 24 * 6)
         }
      },
      listenPlay() {
         this.canPlay = !this.canPlay
         // console.log(this.frame)
         if (this.canPlay) {
            this.play(this.frame, this.canPlay)
         }
      },
      listenPre() {
         if (this.frame > 2) {
            this.play(this.frame - 2, false)
         }
      },
      listenNext() {
         if (this.frame <= this.videoLenght) {
            this.play(this.frame, false)
         }
      },
      sendPath() {
         var $input = document.getElementById("input")
         var videoPath = $input.value
         this.videoPath = videoPath
         that = this
         path = 'http://localhost:5000/path?path=' + videoPath
         axios.get(path)
            .then(function (response) {
               that.status = 3
               that.cars = that.deduplication(response.data[0])
               that.allFrames = response.data[1]
               that.videoLenght = response.data[1].length
               that.play(1, true)
            })
            .catch(function (error) {
               console.log(error);
            });
         
      },
      deduplication(cars) {
         // 车牌去重
         let temp = []
         cars.forEach((item1, index1) => {
            // cars[index1].confidence.toFixed(3)
            let num1 = item1.plate_number
            let flag = false
            console.log(item1)
            item1.confidence = item1.confidence.toFixed(3)
            console.log(item1)
            temp.forEach((item2, index2) => {
               let num2 = item2.plate_number
               if (num1 === num2) {
                  flag = true
               }
            })
            if (!flag) {
               temp.push(item1)
            }
         })
         return temp
      }
   }
})

var myChart = echarts.init(document.getElementById('chart'));
// 指定图表的配置项和数据
var option = {
   tooltip: {},
   legend: {
      data: ['路况统计']
   },
   xAxis: {
      data: ["车辆", "行人", "摩托车", "卡车"]
   },
   yAxis: {},
   series: [{
      name: '路况统计',
      type: 'bar',
      data: [0, 0, 0, 0]
   }]
};

myChart.setOption(option)

function refreshChart(count) {
   var option = myChart.getOption()
   option.series[0].data = count
   myChart.setOption(option)
}

var percent = 0
var scroll = document.getElementById('scroll')
var bar = scroll.children[0]
var mask = scroll.children[1]
bar.onmousedown = function (e) {
   var e = e || window.event // 标准化event
   var leftVal = e.clientX - this.offsetLeft // 因为当前盒子是bar,bar是相对于scroll定位的，因此得到的offsetLeft是相对于scroll的距离，所以说leftVal是scroll距离浏览器左边的距离
   var that = this
   document.onmousemove = function (e) {
      var e = e || window.event // 标准化event
      var maxLimit = scroll.offsetWidth - 10 // 10为bar的宽度
      that.style.left = event.clientX - leftVal + 'px'; // 设置滑块走过的距离,为什么要设置后获取，因为style是行内样式，不设置湖区不到
      var val = parseInt(that.style.left);
      if (val < 0) {
         val = 0
      } else if (val > maxLimit) {
         val = maxLimit
      }
      that.style.left = val + 'px'
      mask.style.width = that.style.left; // 遮罩盒子的宽度
      // 计算百分比
      percent = parseInt(parseInt(that.style.left) / maxLimit * 100) // 走过的距离除以总长就得到百分比
      window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); // 解决选中出现蓝色的一片的bug
   }
   document.onmouseup = function () {
      document.onmousemove = null; // 弹起鼠标不做任何操作
   }
}

function setDrag(percent) {
   let parentWidth = scroll.offsetWidth
   mask.style.width = bar.style.left = parentWidth * percent + 'px'
}